<template>
	<view class="bg-white">
		<cu-custom :bgColor="globalData.bgColor" :isBack="true">
			<template #content>
				<text class="text-darkgrey">直播列表</text>
			</template>
		</cu-custom>
		<view class="search">
			<scroll-view scroll-x class="bg-white nav solid-bottom">
				<view class="cu-item flex-sub" :class="item.value == TabCur ? 'text-blue cur' : ''" v-for="(item, index) in tabs" :key="index" @tap="tabSelect(item, index)">
					{{ item.label }}
				</view>
			</scroll-view>
		</view>
		<view style="margin-top: 90rpx">
			<mescroll-body class="bg-gray" ref="mescrollRef" :down="downOption" :up="upOption" @init="mescrollInit" @down="downCallback" @up="upCallback">
				<view class="cu-list">
					<view class="cu-item radius bg-white solid-bottom" v-for="data in dataList" :key="data.id">
						<view class="flex justify-between">
							<view class="padding-top padding-left-sm padding-bottom-sm">
								<text class="text-darkgrey text-sm cuIcon-titles">直播标题: {{ data.name }}</text>
							</view>
						</view>
						<view class="padding-left padding-right text-sm padding-bottom-xs">
							<view>直播间ID: {{ data.id }}</view>
							<view>直播用户: {{ data.userName }}</view>
							<view>直播时间: {{ data.startTime }} 至 {{ data.endTime }}</view>
							<view class="flex margin-top-xs">
								<view v-if="data.liveStatus == 0" class="text-xs light round pay bg-blue">未开始</view>
								<view v-else-if="data.liveStatus == -1" class="text-xs light round pay bg-red">违规下线</view>
								<view v-else-if="data.liveStatus == 2" class="text-xs light round pay bg-gray">已结束</view>
								<view v-else-if="data.liveStatus == 1" class="text-xs light round pay bg-green">直播中</view>
								<view v-else-if="data.liveStatus == 3" class="text-xs light round pay bg-orange">暂停</view>
								<view v-if="data.liveExpire" class="text-xs light round pay bg-gray margin-left-xs">已过期</view>
							</view>
						</view>

						<view class="flex justify-end align-center padding-left padding-right margin-top-xs padding-bottom-sm text-sm">
							<view class="margin-right-xs">
								<view @click="goLivePage(data)" class="cu-btn sm round bg-blue button-bg">{{ data.liveExpire ? '直播间' : '开播' }}</view>
							</view>
							<view v-if="globalData.permissions['live:liveroom:add']" class="margin-right-xs">
								<view @click="onCopyLiveRoom(data)" class="cu-btn sm round bg-blue button-bg">复制直播间</view>
							</view>
							<navigator :url="'detail?id=' + data.id" class="cu-btn sm round bg-blue button-bg">详情</navigator>
							<view v-if="globalData.permissions['live:liveroom:edit'] && data.status == '1'" class="margin-right-xs">
								<view @click="showOfflineModal(data)" class="cu-btn sm round bg-blue button-bg">违规下线</view>
							</view>
						</view>
						<view class="flex align-center padding-left padding-right margin-top-xs padding-bottom-sm text-sm">
							<text class="cuIcon-time margin-right-xs"></text>
							{{ data.createTime }}
						</view>
					</view>
				</view>
			</mescroll-body>
		</view>
		<!-- 违规下线 -->
		<view class="cu-modal" :class="showModal ? 'show' : ''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">违规下线原因</view>
					<view class="action" @tap="showModal = false">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding">
					<input :placeholder="$t('order.detail.ajn4t3')" type="text" v-model="editItem.remark" />
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-green" @tap="showModal = false">{{ $t('login.login.5csq28') }}</button>
						<button class="cu-btn bg-green margin-left" @tap="handleOffline">{{ $t('goodsappraises.list.6to1i8') }}</button>
					</view>
				</view>
			</view>
		</view>
		<!-- 浮动按钮 -->
		<float-btn @onFloatBtnClick="onTips" icon="cuIcon-question" :bottom="310"></float-btn>
	</view>
</template>

<script>
import floatBtn from '@/components/basic-components/float-btn/index.vue';
// 引入mescroll-mixins.js
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
import { getPage, putObj, getObj, addObj } from '@/api/live/liveroom.js';
import permision from '@/public/app-plus/permission.js';
import service from '@/store/service'; //存储相关数据服务util

export default {
	mixins: [MescrollMixin], // 使用mixin
	components: {
		floatBtn
	},
	data() {
		return {
			globalData: getApp().globalData,
			CustomBar: this.CustomBar,
			TabCur: 99,
			scrollLeft: 0,
			tabs: [
				{ label: '全部', value: 99 },
				{ label: '未开始', value: 0 },
				{ label: '直播中', value: 1 },
				{ label: '暂停', value: 3 },
				{ label: '已结束', value: 2 },
				{ label: '违规下架', value: -1 }
			],
			inputKey: '',
			mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
			downOption: {
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
			},
			// 上拉加载的配置(可选, 绝大部分情况无需配置)
			upOption: {
				page: {
					size: 10 // 每页数据的数量,默认10
				},
				noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
				empty: {
					tip: this.$t('bargain.bargaininfo.m3k7oc')
				}
			},
			// 列表数据
			dataList: [],
			showModal: false,
			editItem: {
				id: null,
				remark: ''
			},
			openLive: false,
			userInfo: {},
			platform: ''
		};
	},
	onLoad(e) {
		if (e && e.status) {
			this.TabCur = Number(e.status) + 1;
			this.scrollLeft = (this.TabCur - 1) * 60;
		}
		this.userInfo = service.getUser();
		this.platform = uni.getSystemInfoSync().platform; //用于 处理ios的日期格式判断时间
	},
	onShow() {
		if (this.openLive) {
			setTimeout(() => {
				if (this.mescroll) {
					this.mescroll.resetUpScroll(); //刷新
				}
			}, 1000);
			this.openLive = false;
		} else {
			if (this.mescroll) {
				this.mescroll.resetUpScroll(); //刷新
			}
		}
	},
	onPageScroll(e) {
		uni.$emit('onPageScroll', e);
	},
	methods: {
		goLivePage(item) {
			// 如果不是当前用户提示不能开播
			if (item.userId == this.userInfo.id) {
				uni.navigateTo({
					url: '/package-live/pages/live/index?id=' + item.id
				});
				this.openLive = true;
			} else {
				uni.showModal({
					title: '提示',
					content: '当前用户不是直播间主播,不能开播~',
					showCancel: false,
					confirmText: this.$t('order.list.f079tc'),
					success: (res) => {}
				});
			}
		},
		tabSelect(item, index) {
			this.TabCur = item.value;
			this.scrollLeft = index * 60;
			this.mescroll.resetUpScroll();
		},
		search(val) {
			this.mescroll.resetUpScroll();
		},
		/*mescroll组件初始化的回调,可获取到mescroll对象 (此处可删,mixins已默认)*/
		mescrollInit(mescroll) {
			this.mescroll = mescroll;
		},
		/*下拉刷新的回调, 有三种处理方式:*/
		downCallback() {
			this.mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
			this.mescroll.endSuccess();
		},
		/*上拉加载的回调*/
		upCallback(page) {
			let pageNum = page.num; // 页码, 默认从1开始
			let pageSize = page.size; // 页长, 默认每页10条
			let querySearch = '?current=' + pageNum + '&size=' + pageSize + '&descs=create_time';
			if (this.inputKey) {
				querySearch = querySearch + '&orderNo=' + this.inputKey;
			}
			let liveStatus = this.TabCur == 99 ? '' : '&liveStatus=' + this.TabCur;
			querySearch = querySearch + liveStatus;
			getPage(querySearch).then((response) => {
				if (response.data) {
					// 接口返回的当前页数据列表 (数组)
					let curPageData = response.data.records;
					// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
					let curPageLen = curPageData.length;
					// 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
					let totalSize = response.data.total;
					curPageData.map((item) => {
						item.liveExpire = this.handleEndTime(item);
					});
					//设置列表数据
					if (page.num == 1) this.dataList = []; //如果是第一页需手动置空列表
					this.dataList = this.dataList.concat(curPageData); //追加新数据
					// 请求成功,隐藏加载状态
					this.mescroll.endBySize(curPageLen, totalSize);
					setTimeout(() => {
						this.mescroll.endSuccess(curPageLen);
					}, 20);
				}
			});
		},
		onTips() {
			uni.showModal({
				title: this.$t('bargain.bargaininfo.b8740a'),
				content: '观看直播请前往商城端,直播延迟在20秒以上.',
				showCancel: false,
				confirmText: this.$t('order.list.f079tc'),
				success: (res) => {}
			});
		},
		showOfflineModal(data) {
			this.editItem.id = data.id;
			this.showModal = true;
		},
		handleOffline() {
			if (!this.editItem.remark) {
				uni.showToast({
					title: '请输入违规原因',
					icon: 'none'
				});
				return;
			}

			putObj({
				id: this.editItem.id,
				remark: this.editItem.remark,
				liveStatus: '-1'
			})
				.then((data) => {
					uni.showToast({
						title: '操作成功'
					});
					this.mescroll.resetUpScroll(); //刷新
					this.showModal = false;
				})
				.catch(() => {});
		},

		// 复制直播间数据,进行快速创建直播间
		onCopyLiveRoom(row) {
			uni.showModal({
				title: '复制直播间',
				content: '复制直播间所有数据,进行快速创建直播间,开播时间为1分钟后。',
				confirmText: '复制',
				success: (res) => {
					if (res.confirm) {
						getObj(row.id)
							.then((response) => {
								let form = response.data;
								form.copyData = true;
								form.id = null;
								form.createTime = null;
								form.updateTime = null;
								form.remark = null;
								form.liveStatus = '0';
								// 默认1分钟后
								form.startTime = this.$moment().add(1, 'm').format('YYYY-MM-DD HH:mm:ss');
								form.endTime = this.$moment().add(1, 'd').format('YYYY-MM-DD HH:mm:ss');
								addObj(form)
									.then(() => {
										uni.showToast({
											title: '操作成功'
										});
										this.mescroll.resetUpScroll(); //刷新
									})
									.catch((res) => {});
							})
							.catch(() => {});
					}
				}
			});
		},
		handleEndTime(liveInfo) {
			// iOS只能识别( yyyy/MM/dd HH:mm:ss)这种时间格式
			if (this.platform == 'ios') {
				liveInfo.endTime = liveInfo.endTime.replace(/-/g, '/');
			}
			const now = new Date().getTime(); // 当前时间
			const endTime = new Date(liveInfo.endTime).getTime(); // 直播结束时间
			const timeDiff = endTime - now; // 时间差
			return timeDiff < 0;
		}
	}
};
</script>

<style>
.search {
	width: 100%;
	padding-bottom: 20rpx;
	position: fixed;
	z-index: 999;
}

.search-content {
	background-color: #f5f5f5;
	line-height: 64upx;
	height: 64upx;
	font-size: 24upx;
	color: #333333;
	flex: 1;
	display: flex;
	align-items: center;
	margin: 0 30upx;
}

.search-content input {
	flex: 1;
	padding-right: 30upx;
	height: 64upx;
	line-height: 64upx;
	font-size: 26upx;
	background-color: transparent;
}

.search-button {
	padding: 10rpx 30rpx 10rpx 30rpx;
}

.img-box {
	width: 200rpx !important;
	height: 200rpx !important;
}

.pay {
	padding: 10rpx 20rpx 10rpx 20rpx;
}

.button-bg {
	padding: 20rpx 40rpx 20rpx 40rpx;
}

.text-to-long {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}
</style>
